<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>超市账单管理系统</title>
  <link type="text/css" rel="stylesheet" href="css/style.css"/>
  <link rel="icon" href="">
</head>
<div id="header">
  <div class="title"></div>
  <div class="welcome">欢迎您：<span id="welcome-user-name"></span></div>
</div>
<div id="section-left">
  <ul class="left-menu">
    <li><a href="bill.html" target="mainFrame"><img src="images/btn_bill.gif"/></a></li>
    <li><a href="provider.html" target="mainFrame"><img src="images/btn_suppliers.gif"/></a>
    </li>
    <li><a href="user.html" target="mainFrame"><img src="images/btn_users.gif"/></a></li>
    <li id="quit-btn"><a><img src="images/btn_exit.gif"/></a></li>
  </ul>
</div>
<div id="modify-section" style="overflow: hidden;display: none;">
  <div class="main">
    <div class="optitle clearfix">
      <div class="title">账单管理&gt;&gt;</div>
    </div>
    <form id="modify-form" method="post" action="">
      <input id="flag" type="hidden">
      <input name="id" type="hidden">
      <div class="content">
        <table class="box">
          <tbody>
          <tr>
            <td class="field">供应商：</td>
            <td>
              <select id="provider" name="providerId"></select>
            </td>
          </tr>
          <tr>
            <td class="field">交易金额：</td>
            <td><input type="text" name="money" class="text"/></td>
          </tr>
          <tr>
            <td class="field">商品描述：</td>
            <td><textarea name="product"></textarea></td>
          </tr>
          <tr>
            <td class="field">是否付款：</td>
            <td>
              <label>
                <input type="radio" name="isPay" value="1" checked="checked"/>
                是
              </label>
              <label>
                <input type="radio" name="isPay" value="0"/>
                否</label>
            </td>
          </tr>
          </tbody>
        </table>
      </div>
      <div class="buttons">
        <input id="submit-btn" type="submit" name="submit" value="确认" class="input-button"/>
        <input id="back-btn" type="button" name="button" value="返回" class="input-button"/>
      </div>
    </form>
  </div>
</div>
<div id="list-section" style="overflow: hidden">
  <div class="menu">
    <form id="search-form" method="get" action="">
      商品名称：<input type="text" name="product" class="input-text"/>&nbsp;&nbsp;&nbsp;&nbsp;
      是否付款：<select name="isPay">
      <option value="-1">请选择</option>
      <option value="1">已付款</option>
      <option value="0">未付款</option>
    </select>&nbsp;&nbsp;&nbsp;&nbsp;
      <button id="search-form-btn" type="submit"> 组 合 查 询</button>
    </form>
  </div>
  <div class="main">
    <div class="optitle clearfix">
      <em><input id="add-btn" type="button" name="button" value="添加数据" class="input-button"/></em>
      <div class="title">账单管理&gt;&gt;</div>
    </div>
    <div class="content">
      <table class="list">
        <thead>
        <tr>
          <td>账单编号</td>
          <td>供应商名称</td>
          <td>商品描述</td>
          <td>交易金额</td>
          <td>是否付款</td>
          <td>账单时间</td>
          <td>操作</td>
        </tr>
        </thead>
        <tbody id="list-body">
        <tr id="list-form-title" style="display: none">
          <td height="23">
            <div class="id">账单编号</div>
          </td>
          <td>
            <div class="providerName">供应商名称</div>
          </td>
          <td>
            <div class="product">商品描述</div>
          </td>
          <td>
            <div class="money">交易金额</div>
          </td>
          <td>
            <div class="isPayStr">是否付款</div>
          </td>
          <td>
            <div class="updateTime">账单时间</div>
          </td>
          <td>
            <div>
              <a href="" class="update">修改</a>
              <a href="" class="delete">删除</a>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/common.js"></script>
<script>
  $(function () {
    var MODULE = "bill";
    $("#add-btn").click(function () {
      $('#modify-form')[0].reset();
      $("#flag").val("add");
      $("#modify-section").show();
      $("#list-section").hide();
      fillBillWithProvider();
    });

    getCurrentUser();
    bindFormBackSwitch();

    // 页面加载完成后，加载列表数据
    refreshList(MODULE);

    $("#list-body").on("click", ".update", function (e) {
      e.preventDefault();
      let id = $(this).parents("tr").find(".id").text();
      fillBillWithProvider(id);
    })

    $("#list-body").on("click", ".delete", function (e) {
      e.preventDefault();
      let id = $(this).parents("tr").find(".id").text();
      postDeleteRow(MODULE, id);
    })

    /**
     * 组合查询
     */
    $("#search-form-btn").click(function (e) {
      e.preventDefault();
      refreshList(MODULE);
    });

    $("#submit-btn").click(function (e) {
      e.preventDefault();
      let flag = $(this).parents("form").find("#flag").val();
      postModifyForm(MODULE, flag);
    })
  });

  function loadProviderListCallBack(result, billId) {
    let $provider = $("#provider");
    $provider.empty();
    for (let index in result) {
      let $option = $("<option></option>");
      $option.attr("value", result[index].id);
      $option.text(result[index].name);
      $provider.append($option);
    }
    if (billId !== undefined) {
      fillBillModifyForm(billId);
    }
  }

  function fillBillWithProvider(billId) {
    $.ajax({
      type: "post",
      contentType: "application/json;charset=UTF-8",
      url: "server/provider/list",
      // data
      success: function (result) {
        loadProviderListCallBack(result.data, billId);
      }
    })
  }

  function fillBillModifyForm(id) {
    $.ajax({
      type: "post",
      contentType: "application/json;charset=UTF-8",
      url: "server/bill/get",
      data: JSON.stringify({"id": id}),
      success: function (result) {
        if (!$.isEmptyObject(result)) {
          result = result.data;
          $("#flag").val("update");
          let lineNode = $("#modify-section");
          for (let prop in result) {
            // 找到以属性名作为css类的div，将内容替换为属性的值
            if (prop === "isPay") {
              lineNode.find("[name='" + prop + "']").each(function () {
                $(this).prop("checked", $(this).val() === result[prop] + "");
              });
            } else if (prop === "providerName") {
              lineNode.find("[name='provider']").val([result[prop]]);
            } else {
              lineNode.find("[name='" + prop + "']").val(result[prop]);
            }
          }

          lineNode.show();
          $("#list-section").hide();
        } else {
          alert("id不存在");
        }
      }
    });
  }
</script>
</body>
</html>